<template>
  <div class="wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/4-1'}">打卡管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/4-1'}">打卡列表</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/4-1'}">用户查看</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <el-form label-width="100px">
        <el-form-item label="标题" class="form">
          <el-input v-model="tableData.title" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="打卡时间">
          <el-input v-model="tableData.time" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="跟读内容">
          <el-table border :data="tableData.messList">
            <el-table-column type="index" label="序号">
            </el-table-column>
            <el-table-column prop="messEN" label="英文"></el-table-column>
            <el-table-column prop="messCN" label="中文"></el-table-column>
            <el-table-column label="录音">
              <template slot-scope="scope">
                <el-button type="primary" :type="scope.row.flag?'danger':'primary'" @click="handleaudio(scope.row,scope.$index)"><i class="iconfont" :class="!scope.row.flag?'icon-zanting1':'icon-zanting'"></i>{{scope.row.flag?'暂停':'播放'}}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="录音">
              <template slot-scope="scope">
              <audio :src="scope.row.mess">
              </audio>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goback">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import {
    userinfo
  } from '@/api/userlist/userlist'
  export default {
    name: "ClockInfo",
    data() {
      return {
        tableData: {},
        index:'',
      }
    },
    methods: {
      handleaudio(row, index) {
        console.log(index);
        var play = document.getElementsByTagName('audio');
        for (var i = 0; i < this.tableData.messList.length; i++) {
          if (i == index) {
            if (!row.flag) {
              play[i].play();
              row.flag = true;
            } else {
              play[i].pause();
              row.flag = false;
            }
          } else {
            play[i].pause();
            this.tableData.messList[i].flag = false;
          }
        }
      },
      getUserInfo() {
        let id =this.$route.query.index;
        console.log(id);
       userinfo(id).then(this.getUserInfoSucc)
      },
      getUserInfoSucc(res) {
        for(let item of res.data.messList){
          item.flag=false;
        }
        this.tableData=res.data;
        this.tableData.time=this.$moment(this.tableData.createAt).format("YYYY-MM-DD HH:mm:ss")
        console.log(this.tableData);
      },
      goback(){
        this.$router.push({
          name:'ClockList'
        })
      }
    },
    mounted() {
      this.getUserInfo();
    }
  }
</script>

<style lang="less" scoped>
  @import "~styles/z.less";
  @import "~styles/css3.less";
  @import "~styles/variables.less";

  .wrapper{
    .w100;
  }

</style>
